<!-- 面包屑导航组件 -->
<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item
      v-for="item in breadcrumbs"
      :key="item.path"
      :to="item.path"
    >
      {{ item.meta.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const breadcrumbs = ref([]);

// 生成面包屑数据
const getBreadcrumbs = () => {
  const matched = route.matched.filter((item) => item.meta && item.meta.title);
  breadcrumbs.value = matched;
};

// 监听路由变化
watch(() => route.path, getBreadcrumbs, { immediate: true });
</script>

<style scoped>
.el-breadcrumb {
  line-height: 60px;
}
</style>
